<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 400px;
				height: 300px;
				border: 1px solid goldenrod;
				background-color: coral;
			}
			.box:nth-child(2){
				/* 相对自己原本的位置进行偏移 */
				position: relative;
				background-color: greenyellow;
				top: -30px;
				right: 50px;
			}
			.box:nth-child(3){
				background-color: brown;
				/* position: relative; */
			}
			.box>span{
				background-color: orange;
				display: block;
				width: 80px;
				height: 40px;
				border-radius: 8px 0px 0px 8px;
				color: white;
				position: absolute;
				/* 相对于离他最近的已经定位的祖先元素进行偏移 */
				left: 0px;
				top: 50px;
				
			}
			#parent{
				width: 1000px;
				margin: 0 auto;
				border: 1px solid blueviolet;
				position: relative;
			}
			#parent>span{
				width: 100px;
				height: 100px;
				display: block;
				background-color: palegoldenrod;
				border-radius: 50%;
				position: fixed;
				bottom: 200px;
				right: 10px;
			}
			.box:nth-child(6){
				background-color: cornflowerblue;
				position: absolute;
				left: 100px;
				top: 200px;
			}
			静态定位
			相对定位:相对自己原来的位置进行偏移,没有偏移标准文档流
			绝对定位:相对于离他最近的已经定位的祖先元素进行偏移 
			固定定位:固定某个位置
		</style>
		
	</head>
	<body>
		<div id="parent">
			<div class="box">box 1 text</div>
			<div class="box">box 2 text</div>
			<div class="box">box 3 text
			<span>span text</span>
			</div>
			<div class="box">box 4 text</div>
			<div class="box">box 5 text</div>
			<div class="box">box 6 text</div>
			<div class="box">box 7 text</div>
			<span>span text</span>
		</div>
	</body>
</html>